<template>
  <div class="report-management">
    <!-- 搜索表单 -->
    <el-form :inline="true" class="search-form">
      <el-form-item label="帖子标题">
        <el-input v-model="searchParams.postTitle" placeholder="输入帖子标题" clearable />
      </el-form-item>
      <el-form-item label="举报人">
        <el-input v-model="searchParams.reporterName" placeholder="输入举报人昵称" clearable />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchParams.reportState" placeholder="选择状态" clearable>
          <el-option label="未处理" :value="0" />
          <el-option label="已处理" :value="1" />
          <el-option label="已撤销" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 举报列表 -->
    <el-table :data="reportList" border v-loading="loading">
      <el-table-column prop="postTitle" label="被举报帖子" width="200" />
      <el-table-column prop="content" label="被举报帖子内容" width="200" show-overflow-tooltip />
      <el-table-column prop="reporterName" label="举报人" width="120" />
      <el-table-column label="举报类型" width="120">
        <template #default="{row}">
          {{ getReportTypeText(row.reportType) }}
        </template>
      </el-table-column>
      <el-table-column prop="reportContent" label="举报内容" min-width="200" show-overflow-tooltip />
      <el-table-column label="状态" width="100">
        <template #default="{row}">
          <el-tag :type="getStateTagType(row.reportState)">
            {{ getStateText(row.reportState) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="举报时间" width="180">
        <template #default="{row}">
          {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{row}">
          <el-button 
            v-if="row.reportState === 0" 
            type="text" 
            @click="handleReport(row)"
          >
            处理
          </el-button>
          <el-button 
            v-if="row.reportState === 0" 
            type="text" 
            @click="cancelReport(row.reportId)"
          >
            撤销
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.pageNum"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      background
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  getReportListService, 
  handleReportService, 
  cancelReportService 
} from '@/apis/report'
import dayjs from 'dayjs'

const searchParams = reactive({
  postTitle: '',
  reporterName: '',
  reportState: null
})

const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

const reportList = ref([])
const loading = ref(false)

// 获取举报列表
const fetchReports = async () => {
  try {
    loading.value = true
    const res = await getReportListService({
      ...searchParams,
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize
    })
    reportList.value = res.rows
    pagination.total = res.total
  } catch (error) {
    ElMessage.error('获取举报列表失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 举报类型文本
const getReportTypeText = (type) => {
  const typeMap = {
    1: '垃圾广告',
    2: '色情低俗',
    3: '暴力内容',
    4: '仇恨言论',
    5: '其他'
  }
  return typeMap[type] || '未知'
}

// 状态文本
const getStateText = (state) => {
  const stateMap = {
    0: '未处理',
    1: '已处理',
    2: '已撤销'
  }
  return stateMap[state] || '未知'
}

// 状态标签类型
const getStateTagType = (state) => {
  const typeMap = {
    0: 'warning',
    1: 'success',
    2: 'info'
  }
  return typeMap[state] || ''
}

// 处理举报
const handleReport = async (row) => {
  try {
    await ElMessageBox.confirm('确定处理此举报吗?处理后帖子将变为待审核状态', '提示', {
      type: 'warning'
    })
    await handleReportService(row.reportId)
    ElMessage.success('处理成功')
    fetchReports()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('处理失败: ' + error.message)
    }
  }
}

// 撤销举报
const cancelReport = async (reportId) => {
  try {
    await ElMessageBox.confirm('确定撤销此举报吗?', '提示', {
      type: 'warning'
    })
    await cancelReportService(reportId)
    ElMessage.success('撤销成功')
    fetchReports()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('撤销失败: ' + error.message)
    }
  }
}

// 分页处理
const handleSizeChange = (val) => {
  pagination.pageSize = val
  pagination.pageNum = 1
  fetchReports()
}

const handleCurrentChange = (val) => {
  pagination.pageNum = val
  fetchReports()
}

// 搜索和重置
const onSearch = () => {
  pagination.pageNum = 1
  fetchReports()
}

const onReset = () => {
  searchParams.postTitle = ''
  searchParams.reporterName = ''
  searchParams.reportState = null
  pagination.pageNum = 1
  fetchReports()
}

onMounted(() => {
  fetchReports()
})
</script>

<style scoped>
.report-management {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.el-table {
  margin-bottom: 20px;
}
</style>